<template>
  <div class='container'>
    <!-- 外面的card -->
    <el-card>
      <el-row type="flex" justify="end">
          <el-button class="el-icon-edit addbutton" type="success" size="small" @click="$router.push('new')">新增试题</el-button>
      </el-row>
      <!-- 学科 -->
      <el-form inline label-width="80px" :model="form" ref="form">
        <el-form-item label="学科" size="small" prop="subjectID">
          <el-select v-model="form.subjectID" @change="subjectChange">
            <el-option v-for="item in subjectList" :key="item.id" :value="item.id" :label="item.subjectName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" size="small" prop="catalogID">
          <el-select v-model="form.catalogID">
            <el-option v-for="item in catalogList" :key="item.id" :value="item.id" :label="item.directoryName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" size="small">
          <el-select v-model="form.tags">
            <el-option v-for="item in tagList" :key="item.id" :value="item.id" :label="item.tagName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" size="small" prop="keyword">
          <el-input v-model="form.keyword"  placeholder="更具题干搜索"></el-input>
        </el-form-item>

        <el-form-item label="试题类型" size="small" prop="questionType">
          <el-select v-model="form.questionType">
            <el-option v-for="item in questionType" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" size="small" prop="difficulty">
          <el-select v-model="form.difficulty">
            <el-option v-for="item in difficulty" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" size="small" prop="direction">
          <el-select v-model="form.direction">
            <el-option v-for="item in directionList" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人" size="small" prop="creatorID">
          <el-select v-model="form.creatorID">
            <el-option v-for="item in userlist" :key="item.id" :value="item.id" :label="item.username"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注" size="small" prop="remarks">
          <el-input v-model="form.remarks" style="width:205px"></el-input>
        </el-form-item>
        <el-form-item label="企业简称" size="small" prop="shortName">
          <el-input v-model="form.shortName" style="width:205px"></el-input>
        </el-form-item>
        <el-form-item label="城市" size="small">
          <el-select v-model="form.province" style="width:100px">
            <el-option v-for="item in provinces" :key="item" :value="item" :label="item"></el-option>
          </el-select>
          <el-select v-model="form.city" style="width:100px">
            <el-option v-for="item in citys" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button style="margin-left: 85px" size="small" @click="clearForm">清除</el-button>
            <el-button  type="primary" size="small" @click="search">搜索</el-button>
          </el-row>
        </el-form-item>
      </el-form>

      <!-- 消息提示按钮 -->
      <el-alert
        :closable = false
        :title="'数据一共'+total+'条'"
        type="info"
        show-icon>
      </el-alert>

      <!-- table -->
      <el-table :data="list">
        <el-table-column prop="number" label="试题编号" width="120px"></el-table-column>
        <el-table-column prop="subject" label="学科" width="100px"></el-table-column>
        <el-table-column prop="catalog" label="目录" width="100px"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="100px">
          <template #default="{row}">
            {{ questionTypeFn(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template #default="{row}">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="200px"></el-table-column>
        <el-table-column prop="difficulty" label="难度"  width="100px">
          <template #default="{row}">
            {{difficultyFn(row)}}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"></el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button @click="getDetail({id:row.id}),showDialog = true" size="small" type="primary" icon="el-icon-view" plain circle></el-button>
            <el-button @click="$router.push(`new?id=${row.id}`)" size="small" type="success" icon="el-icon-edit" plain circle></el-button>
            <el-button @click="remove({id:row.id})" size="small" type="danger" icon="el-icon-delete" plain circle></el-button>
            <el-button @click="addChoice(row.id)" size="small" type="warning" icon="el-icon-check" plain circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="height: 80px" type="flex" justify="end" align="middle">
        <el-pagination
          background
          :current-page="pageObj.page"
          :page-size="pageObj.pagesize"
          :page-sizes="[5,10,15]"
          :total="total"
          layout="prev,pager,next,sizes,jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
    <!-- 对话框 -->
    <el-dialog title="题目预览" :visible="showDialog" @close="handClose">
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="6">【题型】：{{questionTypeFn(detail)}}</el-col>
        <el-col :span="6">【编号】：{{detail.id}}</el-col>
        <el-col :span="6">【难度】：{{difficultyFn(detail)}}</el-col>
        <el-col :span="6">【标签】：{{detail.tags}}</el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="6">【学科】：{{detail.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{detail.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{detail.direction}}</el-col>
      </el-row>
      <hr>
      【题干】：
      <p style="color: blue" v-html="detail.question"></p>
      <div>{{questionTypeFn(detail)}} 选项：（以下选中的选项为正确答案）</div>
      <!-- 单选框 -->
      <div v-if="detail.questionType === '1'" class="detail_item">
        <el-radio-group v-model="radio" size="mini">
          <el-radio
            v-for="item in options"
            :key="item.id"
            :label="item.isRight"
            :disabled="item.isRight === 0"
            >{{ item.code + ': ' + item.title }}</el-radio
          >
        </el-radio-group>
      </div>
      <!-- 多选框 -->
      <div v-else-if="detail.questionType === '2'" class="detail_item">
          <el-checkbox
            v-for="item in options"
            :label="item.code + ': ' + item.title"
            :key="item.id"
            :checked="!!item.isRight"
            :disabled="item.isRight === 0"
            v-model="item.isRight"
          ></el-checkbox>
        </div>
      <hr>
      【参考答案】：<el-button type="danger" size="mini" @click="showVideo = true">视频答案预览</el-button>
      <div v-if="showVideo">
        <video :src="detail.videoURL" controls="controls"></video>
      </div>
      <hr>
      【答案解析】：<span v-html="detail.answer"></span>
      <hr>
      【题目备注】：{{detail.remarks}}
      <template #footer>
        <el-button type="primary" @click="handClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions.js'
import { list as getSubjectsList } from '@/api/hmmm/subjects.js'
import { list as catalogList } from '@/api/hmmm/directorys.js'
import { list as tagList } from '@/api/hmmm/tags.js'
import { list as userList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      list: [], // 基础题库列表
      detail: [], // 基础题库详情
      options: [], // 题干列表
      subjectList: [], // 学科列表
      form: {
        // subjectID: '',
        // catalogID: '',
        // tags: '',
        // keyword: '',
        // questionType: '',
        // difficulty: '',
        // direction: '',
        // creatorID: '',
        // province: '',
        // city: '',
        // remarks: '',
        // shortName: ''
      },
      catalogList: [], // 二级目录
      tagList: [], // 标签列表
      userlist: [], // 录入人列表
      provinces: provinces(),
      citys: '',
      total: 0,
      showDialog: false,
      radio: 1,
      showVideo: false,
      // 分页器对象
      pageObj: {
        page: 1,
        pagesize: 5
      },
      // 题型
      questionType: questionType,
      // // 判断难度
      difficulty: difficulty,
      // // 方向列表
      directionList: direction
    }
  },
  created () {
    this.getList()
    this.getSubjectsList()
    this.getUserList()
    // this.subjectChange()
  },
  methods: {
    // 基础题库列表
    async getList () {
      const res = await list(this.pageObj)
      // console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 基础题库详情
    async getDetail (id) {
      const res = await detail(id)
      // console.log(res)
      this.detail = res.data
      this.options.push(...res.data.options)
    },
    handleCurrentChange (val) {
      this.pageObj.page = val
      this.getList()
    },
    handleSizeChange (val) {
      this.pageObj.page = 1
      this.pageObj.pagesize = val
      this.getList()
    },
    handClose () {
      this.showDialog = false
      this.options = []
      this.showVideo = false
    },
    // 删除
    remove (id) {
      this.$confirm('你确定要删除吗', '提示', { type: 'warning' }).then(async () => {
        await remove(id)
        this.$message.success('删除成功')
        this.getList()
      })
        .catch(() => {
          this.$message.info('已取消')
        })
    },
    // 判断题型
    questionTypeFn (row) {
      let text
      this.questionType.forEach(item => {
        if (item.value === +row.questionType) {
          text = item.label
        }
      })
      return text
    },
    // 判断难度
    difficultyFn (row) {
      let text
      this.difficulty.forEach(item => {
        if (item.value === +row.difficulty) {
          text = item.label
        }
      })
      return text
    },
    // 获取学科列表
    async getSubjectsList () {
      const res = await getSubjectsList({ page: 1, pagesize: 60 })
      // this.form = res.data.items
      this.subjectList = res.data.items
    },
    // 学科下拉菜单变化
    async subjectChange (e) {
      const res1 = await catalogList()
      // console.log(res1)
      this.catalogList = res1.data.items.filter(item => item.subjectID === e)
      const res2 = await tagList()
      this.tagList = res2.data.items.filter(item => item.subjectID === e)
    },
    // 获取用户列表
    async getUserList () {
      const res = await userList()
      // console.log(res)
      this.userlist = res.data.list
    },
    // 清除表单
    clearForm () {
      // this.$refs.form.resetField()
      // for (const key in this.form) {
      //   this.form[key] = ''
      // }
      this.form = {}
      this.tagList = []
      this.catalogList = []
      this.getList()
    },
    // 搜索
    async search () {
      if (JSON.stringify(this.form) === '{}') return
      const res = await list(this.form)
      this.total = res.data.counts
      // console.log(res)
      this.list = res.data.items
    },
    // 添加精选
    async addChoice (id) {
      // console.log(id)
      // await choiceAdd(id)
      this.$confirm('是否要将该题加入精选', '提示', { type: 'info' }).then(async () => {
        await choiceAdd({ id, choiceState: 1 })
        this.$message.success('加入精选题库成功')
        this.$router.push('choice')
      })
        .catch(() => {
          this.$message.info('已取消')
        })
    }
  },
  watch: {
    'form.province' (value) {
      this.form.city = ''
      this.citys = ''
      this.citys = citys(value)
    }
  }
}
</script>

<style scoped lang='scss'>
  .addbutton{
    margin-bottom: 15px;
    width: 95px;
  }
</style>
